<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        #ul1{
            width: 1000px;
            margin: 100px auto;
            list-style: none;
        }
        #ul1 li{
            float: left;
            width: 260px;


        }
        #ul1 li div{
            border: 1px solid #333333;
        }
        #ul1 li div {
            width: 250px;
            display: block;
            margin-bottom: 10px;
        }
        #ul1 li div img{
            width: 250px;
            display: block;
        }
    </style>
</head>
<body>
    <ul id="ul1">
         <li>

         </li>
        <li>

        </li>
        <li>

        </li>

    </ul>
<script src="jquery-1.11.2.min.js"></script>
<script>
    //图片没加载之前数据是不能被添加进来的,可以使得后端传递一个高度过来可以解决
        window.onload=function () {
             var oUl=document.getElementById("ul1");
                var aLi=oUl.getElementsByTagName("li");//获取li
                var iLen=aLi.length;
                //执行ajax函数
               $.getJSON("demo.json", function(data) {
                    var data=data.results;
                   for(var i=0;i<data.length;i++){
                       console.info(data[i].picUrl);
                       //获取高度最短的li,往最短的li中添加
                       var _index=getShort();
                       var oDiv=document.createElement("div");
                       var oImg =document.createElement("img");
                       //添加img的src
                       oImg.src=data[i].picUrl;
                       oImg.style.width='225px';
                       //为了不变形
                       oImg.style.height=data[i].height*(225/data[i].width)+'px';
                       console.info(  oImg.style.height);
                       oDiv.appendChild(oImg);
                       var oP=document.createElement("p");
                       //添加p的内容
                       oP.innerHTML=data[i].name;
                       oDiv.appendChild(oP);
                       aLi[_index].appendChild(oDiv);

                   }
                   //得到可视区区域的高度中最短
                   function getShort(){
                       var index=0;
                       var ih=aLi[index].offsetHeight;//可视区区域的高度(height+padding+border)
                       /*==$().height()*/
                       for(var i=1;i<iLen;i++){
                           if(aLi[i].offsetHeight<ih){
                               index=i;
                               ih=aLi[i].offsetHeight;
                           }
                       }
                       return index;

                   }



               })




        }


</script>

</body>
</html>